/*
 * @type attributetype
 *       接收指定的元素id属性值或者class属性值
 * @return Element或者Elements
 *       返回指定的元素或元素数组
 */
function elements(attributetype){
	if(attributetype.slice(0,1) == "."){
		return document.getElementsByClassName(attributetype.slice(1));
	}
	else if(attributetype.slice(0,1) == "#"){
		return document.getElementById(attributetype.slice(1));
	}else{
		alert("传入的参数有误");
	}
}
var sub_box01 = elements(".sub_box01")[0];//整个文档的父级元素
var links = sub_box01.getElementsByTagName("a");//超链接的集合
var super_ul = elements(".super_ul")[0];//ul
var li_s = super_ul.getElementsByTagName("li");//li的集合
var index_last = 0;//当前a链接的索引
var setInter = 0; //setInterval变量

//设置a链接的点击事件
for(var i = 0; i < links.length; i++){
	links[i].onclick = function(){
		links[index_last].style.color = "black";
		links[index_last].style.backgroundColor = "transparent";
		var index_temp = a_index(links,this);
		index_last = index_temp;
		this.style.color = "white";
		this.style.backgroundColor = "#f40";
		super_ul.style.left = index_last * -1 * 500 + "px";
	}
	links[i].addEventListener("mouseover",function(){
		clearInterval(setInter);
	});
	links[i].addEventListener("mouseout",function(){
		setInter = setInterval(carousel_fun,3000);
	});
}

//查找当前a链接的索引
function a_index(elements,element){
	for(var i = 0; i < elements.length; i++){
		if(elements[i] === element){
			return i;
		}
	}
}

//设置每个li的鼠标事件
for(var i = 0; i < li_s.length; i++){
	li_s[i].addEventListener("mouseover",function(){
		clearInterval(setInter);
	});
	li_s[i].addEventListener("mouseout",function(){
		setInter = setInterval(carousel_fun,3000);
	});
}

//轮播
setInter = setInterval(carousel_fun,3000);

//轮播的方法
function carousel_fun(){
	links[index_last].style.color = "black";
	links[index_last].style.backgroundColor = "transparent";
	index_last++;
	if(index_last > links.length - 1){
		index_last = 0;
	}
	links[index_last].style.color = "white";
	links[index_last].style.backgroundColor = "#f40";
	super_ul.style.left = index_last * -1 * 500 + "px";
}

